<template>
  <view class="container">
    <!-- 页面内容 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 自定义模块 -->
      <view class="section">
        <view class="section-title">自定义</view>
        
        <!-- 添加欢迎语卡片 -->
        <view class="welcome-card">
          <view class="card-title">添加欢迎语</view>
          
          <!-- 文本输入区域 -->
          <view class="input-section">
            <u-textarea
              v-model="welcomeText"
              placeholder="请输入文本内容"
              height="120"
              maxlength="600"
              count
              placeholderClass="textarea-placeholder"
            ></u-textarea>
            <view class="word-count">{{ welcomeText.length }}/600</view>
          </view>
          
          <!-- 上传附件按钮 -->
          <view class="upload-section">
            <u-button 
              @click="handleUpload" 
              type="default" 
              plain 
              size="mini"
              icon="attachment"
            >
              上传附件
            </u-button>
          </view>
          
          <!-- 创建欢迎语按钮 -->
          <u-button 
            @click="createWelcome" 
            type="primary" 
            customStyle="margin-top: 30rpx;"
          >
            创建欢迎语
          </u-button>
        </view>
      </view>

      <!-- 场景化模块 -->
      <view class="section">
        <view class="section-title">场景化</view>
        
        <!-- 场景化列表 -->
        <view class="scenario-list">
          <view 
            v-for="(item, index) in scenarioList" 
            :key="index" 
            class="scenario-item"
            @click="handleScenario(item)"
          >
            <view class="scenario-left">
              <view class="icon-wrapper" :style="{ backgroundColor: item.color }">
                <u-icon :name="item.icon" color="#ffffff" size="20"></u-icon>
              </view>
              <text class="scenario-name">{{ item.name }}</text>
            </view>
            <u-icon name="arrow-right" color="#cccccc" size="16"></u-icon>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      welcomeText: '', // 欢迎语文本
      scenarioList: [
        {
          name: '新客培育',
          icon: 'user',
          color: '#19be6b'
        },
        {
          name: '客户生命周期',
          icon: 'clock',
          color: '#2979ff'
        },
        {
          name: '客户分层',
          icon: 'grid',
          color: '#ff9900'
        },
        {
          name: '唤醒客户',
          icon: 'bell',
          color: '#e43d33'
        },
        {
          name: '生日SOP',
          icon: 'gift',
          color: '#8a6d3b'
        },
        {
          name: '节日SOP',
          icon: 'calendar',
          color: '#9054d4'
        }
      ]
    }
  },
  methods: {
    // 上传附件
    handleUpload() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          uni.showToast({
            title: '附件已选择',
            icon: 'success'
          });
          // 这里可以处理文件上传逻辑
          console.log('选择的文件:', tempFilePath);
        }
      });
    },
    
    // 创建欢迎语
    createWelcome() {
      if (!this.welcomeText.trim()) {
        uni.showToast({
          title: '请输入欢迎语内容',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '创建中...'
      });
      
      // 模拟创建过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        });
        
        // 清空输入框
        this.welcomeText = '';
      }, 1500);
    },
    
    // 处理场景化项点击
    handleScenario(item) {
      uni.showToast({
        title: `进入${item.name}`,
        icon: 'none'
      });
      
      // 实际项目中这里可以跳转到对应页面
      // uni.navigateTo({
      //   url: `/pages/scenario/${item.key}`
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.navbar-right {
  padding-right: 30rpx;
}

.content {
  height: calc(100vh - 88rpx);
  padding: 30rpx;
  box-sizing: border-box;
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
}

.welcome-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20rpx;
}

.input-section {
  position: relative;
}

.word-count {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  font-size: 24rpx;
  color: #999999;
  background-color: #ffffff;
  padding: 0 10rpx;
}

.upload-section {
  margin-top: 20rpx;
}

.scenario-list {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.scenario-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.scenario-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 60rpx;
  height: 60rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.scenario-name {
  font-size: 28rpx;
  color: #333333;
}

/* 自定义uView组件样式 */
::v-deep .u-textarea__field {
  font-size: 28rpx;
  line-height: 1.5;
}

::v-deep .textarea-placeholder {
  color: #cccccc;
  font-size: 28rpx;
}

::v-deep .u-button--default {
  border-color: #dcdfe6;
  color: #606266;
}

::v-deep .u-button--primary {
  background-color: #2979ff;
}

/* 动画效果 */
.welcome-card,
.scenario-item {
  animation: fadeInUp 0.5s ease-out;
}

.scenario-item:nth-child(1) { animation-delay: 0.1s; }
.scenario-item:nth-child(2) { animation-delay: 0.2s; }
.scenario-item:nth-child(3) { animation-delay: 0.3s; }
.scenario-item:nth-child(4) { animation-delay: 0.4s; }
.scenario-item:nth-child(5) { animation-delay: 0.5s; }
.scenario-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 375px) {
  .content {
    padding: 20rpx;
  }
  
  .welcome-card,
  .scenario-list {
    border-radius: 8rpx;
  }
  
  .scenario-item {
    padding: 24rpx;
  }
}
</style>